<?php
$type = empty($_GET['type'])?1:$_GET['type'];
?>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body{
            margin:0;
            padding:0;
            font-size:14px;
            background:#F8F8F8;
        }
        a{
            text-decoration:none !important;
            color:#000000;
        }
        .header{
            font-size:16px;
            text-align:center;
            background:#FFFFFF;
            padding:10px 0;
            position:relative;
        }
        .rt_pos{
            position:absolute;
            left:16px;
            top:16px;
            content: "";
            display: inline-block;
            height: 8px;
            width: 8px;
            border-width: 0 0 2px 2px;
            border-color: #000000;
            border-style: solid;
            transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
            -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
        }
        .time_num{
            background: rgb(13, 97, 203);
            font-size:16px;
            color:#FFFFFF;
            padding:10px 0 10px 0;
            text-align:center;
        }
        .triangle_left{
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-right: 6px solid rgb(255, 255, 255);
            display:inline-block;
        }
        .triangle_right{
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-left: 6px solid rgb(255, 255, 255);
            display:inline-block;
        }
        .menu_div{
            font-size:16px;
            padding:10px 0 18px 0;
        }
        .menu_div_div{
            display:inline-block;
            width:24%;
            text-align:center;
        }
        .menu_div_div_a{
            padding-bottom:4px;
            border-bottom:3px solid #F8F8F8;
        }
        .span_active{
            color:rgb(13, 97, 203);
            border-bottom:3px solid rgb(13, 97, 203);
        }
        .data_div{
            background:#FFFFFF;
        }
        .data_div_div{
            border-bottom:1px solid #DFDFDF;
        }
        .data_div_div:last-child{
            border-bottom:none;
        }
        .data_div_2info .data_div:last-child{
            border-bottom:none;
        }
        .data_div_info{
            width:23.5%;
            display:inline-block;
            text-align:center;
            margin:10px 0;
            border-right:1px solid #DFDFDF;
            line-height:25px;
        }
        .data_div_info p{margin:0;}
        .data_div_div div:nth-child(4){border-right:none;}

        .is_switch{
            display:inline-block;
            width:10%;
            position:absolute;
            right:0;
            text-align:center;
            color:rgb(13, 97, 203);
            font-weight: bold;
            font-size:24px;
            line-height:24px;
        }
        .data_info{
            font-size:16px;
            background:#FFFFFF;
            position:relative;
            padding:8px 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <span class="rt_pos"></span>
        <span>数据统计</span>
    </div>

    <div class="time_num">
        <span class="triangle_left"></span>&nbsp;&nbsp;&nbsp;
        <span>2020-02</span>&nbsp;&nbsp;&nbsp;
        <span>共计&nbsp;&nbsp;(</span>
        <span>111</span>
        <span>)</span>
        &nbsp;&nbsp;&nbsp;<span class="triangle_right"></span>
    </div>

    <div class="menu_div">
        <div class="menu_div_div"><a href="?type=1" class="menu_div_div_a <?=($type == '1')?'span_active':''?>">案件列表</a></div>
        <div class="menu_div_div"><a href="?type=2" class="menu_div_div_a <?=($type == '2')?'span_active':''?>">检材列表</a></div>
        <div class="menu_div_div"><a href="?type=3" class="menu_div_div_a <?=($type == '3')?'span_active':''?>">单位案件</a></div>
        <div class="menu_div_div"><a href="?type=4" class="menu_div_div_a <?=($type == '4')?'span_active':''?>">案件类型</a></div>
    </div>

    <?php if(in_array($type,array(1))){ ?>
    <div class="data_div">
        <?php
        $aaa = 25;
        $j = 0;
        for($i=1;$i<=$aaa;$i++){
            if($j==0){ echo "<div class='data_div_div'>";}
        ?>
            <div class="data_div_info">
                <p style="color:rgb(13, 97, 203);"><?=rand(1,99)?></p>
                <p>分局名称<?=$i?></p>
            </div>
        <?php
            if($j==3){
                echo "</div>";
                $j = 0;
            }else{
                $j++;
            }
            if($i == $aaa){
                echo "</div>";
            }
        }
        ?>
    </div>
    <?php }elseif(in_array($type,array(2,3,4))){ ?>
    <div class="data_div_2">
        <?php
        for($k=0;$k<=9;$k++){
        ?>
            <div class="data_info">
                <div style="display:inline-block;width:45%;padding-left:10px;">分局名称<?=$k?></div>
                <div style="display:inline-block;width:30%;">累计&nbsp;&nbsp;<span><?=rand(1,999)?></span>件</div>
                <span class="is_switch" data_id="<?=$k?>" is_open="0">+</span>
            </div>
            <div class="data_div_2info" id="count_<?=$k?>" style="display:none;">
                <div class="data_div" style="background:unset;">
                    <?php
                    $aaa = rand(5,20);
                    $j = 0;
                    for($i=1;$i<=$aaa;$i++){
                        if($j==0){ echo "<div class='data_div_div'>";}
                        ?>
                        <div class="data_div_info">
                            <p style="color:rgb(13, 97, 203);"><?=rand(1,99)?></p>
                            <p>分局名称<?=$i?></p>
                        </div>
                        <?php
                        if($j==3){
                            echo "</div>";
                            $j = 0;
                        }else{
                            $j++;
                        }

                        if($i == $aaa){
                            echo "</div>";
                        }
                    }
                    ?>
                </div>
            </div>
            <div style="width:100%;height:5px;"></div>
        <?php
        }
        ?>
    </div>
    <?php } ?>
</body>

<script src="common/style/js/jquery.min.1.8.1.js"></script>
<script>
    $(function(){
        $('.is_switch').click(function () {
            var data_id = $(this).attr('data_id');
            var is_open = $(this).attr('is_open');

            if(is_open == '0'){
                $('#count_'+data_id).slideDown("slow");
                $(this).attr({'is_open':'1'});
                $(this).html("&minus;");
            }else{
                $('#count_'+data_id).slideUp("slow");
                $(this).attr({'is_open':'0'});
                $(this).text('+');
            }
        });
    })
</script>

</html>
